<template>
  <div class="common-layout linear-gradient">
    <el-container>
      <!-- <el-header class="header-container">
        <div class="headerTitle">查询条件</div>
        <div class="header-content">

          <el-form-item label="出口卷号" style="margin-left:23px !important">
            <el-input v-model="headerSearchForm.variableName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="钢种" style="margin-left:23px !important">
            <el-input v-model="headerSearchForm.variableName" placeholder="请输入"/>
          </el-form-item>
          <div class="header-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="primary" @click="handleReset">重置</el-button>
          </div>
        </div>
      </el-header> -->
      <el-main>
        <div class="table-container-main" style="height:86vh">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266', textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="serialNumber" label="序号" fixed="left" width="40px">
              <template #default="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="EXTID" label="出口卷号"/>
            <el-table-column prop="PRODSTARTTIME" label="开始生产时间"  />
            <el-table-column prop="STEELGRADE" label="钢种"/>
            <el-table-column prop="INMATTHK" label="入口厚度(mm)" />
            <el-table-column prop="INMATWIDTH" label="入口宽度(mm)" />
            <el-table-column prop="ISAI" label="是否使用AI模型" />
            <el-table-column prop="ELONGAIM" label="目标延伸率" />
            
            
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[20, 30, 50,100]"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
    </el-container>
    <el-dialog v-model="dialogVisible" title="模型计算" style="text-align: left;width: 80%;height:90%;--el-dialog-title-font-size: 16px;margin-top:30px" >
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">基本信息</div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col :span="4" style="font-size:12px">
                <div>
                  <span>卷号</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px;height:20px;margin-left:4px;" />
                </div>
            </el-col>
            <el-col :span="4" style="font-size:12px;margin-left:10px">
                <div>
                  <span>钢种</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="4" style="font-size:12px;margin-left:10px">
                <div>
                  <span>屈服强度</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="4" style="font-size:12px;margin-left:10px">
                <div>
                  <span>出宽</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:120px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>出厚</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            <el-col :span="3" style="font-size:12px;margin-left:10px">
                <div>
                  <span>入厚</span>
                  <el-input v-model="headerSearchForm.productionLine" placeholder="请输入" style="width:100px;height:20px;margin-left:4px" />
                </div>
            </el-col>
            
        </el-row>
        
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">轧制规程参数</div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col style="font-size:12px;">
                <el-table :data="rollingProcedureTable" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }" :cell-style="{fontSize:'12px'}">
                    <el-table-column prop="ITEM" label="ITEM" />
                    <el-table-column prop="UNIT" label="单位" />
                    <el-table-column prop="S1" label="STD1" />
                    <el-table-column prop="S2" label="STD2" />
                    <el-table-column prop="S3" label="STD3" />
                    <el-table-column prop="S4" label="STD4" />
                    <el-table-column prop="S5" label="STD5" />
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col style="font-size:12px">
                <div class="msg-title">仿真结果输出</div>
            </el-col>
        </el-row>
        <el-row style="margin-top:10px;margin-left:15px">
            <el-col style="font-size:12px;">
                <el-table :data="simulationResultOutTable" style="width: 100%" :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'12px' }" :cell-style="{fontSize:'12px'}">
                    <el-table-column prop="ITEM" label="ITEM" />
                    <el-table-column prop="UNIT" label="单位" />
                    <el-table-column prop="BEFORE" label="BEFORE" />
                    <el-table-column prop="STD1" label="STD1" />
                    <el-table-column prop="STD2" label="STD2" />
                    <el-table-column prop="STD3" label="STD3" />
                    <el-table-column prop="STD4" label="STD4" />
                    <el-table-column prop="STD5" label="STD5" />
                </el-table>
            </el-col>
        </el-row>

        <el-row style="margin-top:10px;margin-left:15px">
            <el-col style="font-size:12px;" :span="6">
              <div style="height: 160px;width:450px;">
                <nercar-echarts
                :title="option.title"
                :series="option.series"
                :legend="option.legend"
                :graphic="option.graphic"
                :tooltip="option.tooltip"
                :x-axis="option.xAxis"
                :y-axis="option.yAxis"
                :grid="option.grid"
                style="position:absolute;width:260px;height:240px !important;top:-30px"
                
                />
              </div>

            </el-col>
            <el-col style="font-size:12px;" :span="6">
              <div style="height: 160px;width:450px;">
                <nercar-echarts
                :title="option1.title"
                :series="option1.series"
                :legend="option1.legend"
                :graphic="option1.graphic"
                :tooltip="option1.tooltip"
                :x-axis="option1.xAxis"
                :y-axis="option1.yAxis"
                :grid="option1.grid"
                style="position:absolute;width:260px;height:240px !important;top:-30px"
                
                />
              </div>

            </el-col>
            <el-col style="font-size:12px;" :span="6">
              <div style="height: 160px;width:450px;">
                <nercar-echarts
                :title="option2.title"
                :series="option2.series"
                :legend="option2.legend"
                :graphic="option2.graphic"
                :tooltip="option2.tooltip"
                :x-axis="option2.xAxis"
                :y-axis="option2.yAxis"
                :grid="option2.grid"
                style="position:absolute;width:260px;height:240px !important;top:-30px"
                
                />
              </div>
            </el-col>
            <el-col style="font-size:12px;" :span="6">
              <div style="height: 160px;width:450px;">
                <nercar-echarts
                :title="option3.title"
                :series="option3.series"
                :legend="option3.legend"
                :graphic="option3.graphic"
                :tooltip="option3.tooltip"
                :x-axis="option3.xAxis"
                :y-axis="option3.yAxis"
                :grid="option3.grid"
                style="position:absolute;width:260px;height:240px !important;top:-30px"
                
                />
              </div>
            </el-col>
        </el-row>




        
    </el-dialog>


  </div>
</template>
<script lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick, defineComponent } from 'vue';
  import { ElMessage } from 'element-plus';
  import '/@/views/RollingSimulation/rollingSimulationModelCommonStyle.less';
  import { levelingMachineApi } from "/@/api/levelingmachine/index";



  interface SearchForm {
    productionLine: string;
    variableDescription: string;
    variableName: string;
    start:string,
    end:string
  }

  export default defineComponent({
    name: 'DataDictionary',
    setup() {
      // 表单数据
      const headerSearchForm = reactive<SearchForm>({
        productionLine: '',
        variableDescription: '',
        variableName: '',
        start:'',
        end:''
      });
      const dialogVisible = ref<boolean>(false);

      // 表格数据
      const tableData = ref([
        {
          EXTID: 'M23132184C',
          PRODSTARTTIME: 'SPCC-1DW',
          STEELGRADE: '920',
          INMATTHK: '2.8',
          INMATWIDTH: '920',
          ELONGAIM: '0.6',
          planTime: '',
          ISAI:'是'

        }
      ]);

      const rollingProcedureTable=ref([
        {
          ITEM:"工作辊直径",
          UNIT:"mm",
          S1:"460",
          S2:"460",
          S3:"460",
          S4:"460",
          S5:"460"

        }
      ]);
      
      const simulationResultOutTable=ref([
        {
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        },{
          ITEM:"速度",
          UNIT:"m/min",
          BEFORE:"/",
          STD1:"355",
          STD2:"515",
          STD3:"728",
          STD4:"975",
          STD5:"1273"

        }
      ]);

      const option = {
        xAxis: {
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          name: '轧制力/10kN',
          nameTextStyle: {
            fontSize:'8px',
            color: "#6d7882",
          },
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };
      const option1 = {
        xAxis: {
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            name: '强力/10kN',
            nameTextStyle: {
              fontSize:'8px',
              color: "#6d7882",
            },
            splitLine: {     //网格线
              "show": false
            },
            axisLabel: {
              fontSize: 10 // 设置字体大小为14
            },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };
      const option2 = {
        xAxis: {
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          name: '速度[m/min]',
          nameTextStyle: {
            fontSize:'8px',
            color: "#6d7882",
          },
          splitLine: {     //网格线
            "show": false
          },
          axisLabel: {
            fontSize: 10 // 设置字体大小为14
          },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };
      const option3 = {
        xAxis: {
            splitLine: {     //网格线
              "show": false
            },
            axisLabel: {
              fontSize: 10 // 设置字体大小为14
            },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            name: '功率/kW',
            nameTextStyle: {
              fontSize:'8px',
              color: "#6d7882",
            },
            splitLine: {     //网格线
              "show": false
            },
            axisLabel: {
              fontSize: 10 // 设置字体大小为14
            },
        },
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27, 28, 25]
          }
        ]
      };

      const dataSourceType = ref('');


      const dataSourceTypeOptions = ref([
        { label: 'PLC', value: 'PLC' },
        { label: '传感器', value: '传感器' },
        { label: 'AI算法', value: 'AI算法' },
        { label: '称重传感器', value: '称重传感器' },
        { label: '电池管理系统', value: '电池管理系统' },
      ]);

      // 分页数据
      const pagination = reactive({
        currentPage: 1,
        pageSize: 20,
        total: tableData.value.length,
      });

      // 窗口大小变化处理
      const handleResize = () => {
        nextTick(() => {
          // 这里可以添加表格自适应高度的逻辑
        });
      };

      const handleCheck = (row: any) => {
        dialogVisible.value = true;
      }

      // 获取表格数据
      const fetchTableData = async () => {
        try {
        const params: any = {
          pageIndex: String(pagination.currentPage),
          pageSize: String(pagination.pageSize),
        };

       


        // 移除未定义的参数，避免发送空字符串
        Object.keys(params).forEach(key => {
          if (params[key as keyof typeof params] === undefined) {
            delete params[key as keyof typeof params];
          }
        });
        
        console.log('Fetching data with params:', params);
        const response = await levelingMachineApi.findData(params);
        console.log('API Response:', response);

        // Correctly access data from response.data if 'response' is an AxiosResponse
        const responseData = response.data;

        if (responseData && responseData.data && Array.isArray(responseData.data.records)) { 
            tableData.value = responseData.data.records.map((item:any) => ({
              EXTID: item.extid,
              PRODSTARTTIME: item.prodStartTime,
              STEELGRADE: item.steelgrade,
              INMATTHK: item.inMatThk,
              INMATWIDTH: item.inMatWidth,
              ELONGAIM: item.elongAim,
              ISAI: item.ISAI==0?'否':'是',
              ...item // Keep other original fields if needed for detail view
            }));
            console.log(tableData.value)
            pagination.total = responseData.count || responseData.data.records.length; // Use responseData.count for total
            ElMessage.success(responseData.msg || '查询成功');
        } else {
          ElMessage.info( responseData?.msg || (response as any)?.msg || '未查询到数据或响应格式不正确');
          tableData.value = [];
          pagination.total = 0;
        }
      } catch (error: any) {
        console.error('获取数据失败:', error);
        // Try to get error message from error.response.data.msg or error.data.msg
        const errorMessage = error.response?.data?.msg || error.data?.msg || error.msg || error.message || '获取数据失败';
        ElMessage.error(errorMessage);
        tableData.value = [];
        pagination.total = 0;
      }
      };

      // 查询方法
      const handleSearch = () => {
        pagination.currentPage = 1;
        fetchTableData();
      };

      // 重置方法
      const handleReset = () => {
        (Object.keys(headerSearchForm) as Array<keyof SearchForm>).forEach((key) => {
          headerSearchForm[key] = '';
        });
        handleSearch();
      };


      // 删除方法
      const handleDelete = (row: any) => {
        // 这里添加删除逻辑
        console.log('删除', row);
      };

      // 分页大小变化
      const handleSizeChange = (val: number) => {
        pagination.pageSize = val;
        fetchTableData();
      };

      // 页码变化
      const handleCurrentChange = (val: number) => {
        pagination.currentPage = val;
        fetchTableData();
      };

      // 生命周期钩子
      onMounted(() => {
        fetchTableData();
        window.addEventListener('resize', handleResize);
      });

      onUnmounted(() => {
        window.removeEventListener('resize', handleResize);
      });

    const form = reactive({
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
    })

      return {
        headerSearchForm,
        tableData,
        pagination,
        handleSearch,
        handleReset,
        handleCheck,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        dataSourceTypeOptions,
        dataSourceType,
        dialogVisible,
        form,
        rollingProcedureTable,
        simulationResultOutTable,
        option,
        option1,
        option2,
        option3
      };
    },
  });
</script>
<style scoped lang="less">
.msg-title {
    top: -4vh;
    left: 39.5vw;
    background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2vh;
    font-weight: bolder;
    width: 10vw;
}

:deep(.aprd-search-form .el-input--small .el-input__inner),
:deep(.aprd-search-form .el-select--small .el-select__input-wrapper input),
:deep(.aprd-search-form .el-date-editor--small .el-range-input),
:deep(.aprd-search-form .el-date-editor--small .el-range-separator) {
  font-size: 12px !important;
}

:deep(.aprd-search-form .el-select--small) {
  width: 150px;
}

:deep(.aprd-search-form .el-form-item__label) {
  font-size: 12px;
  line-height: 28px;
  color: #606266;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 3px;
}



:deep(.el-table) {
  font-size: 12px;
}


::v-deep .el-table--enable-row-transition .el-table__body td {
  padding-top: 4px;
  padding-bottom: 4px;
}

::v-deep .el-table .el-table__cell {
  padding-top: 4px !important;
}
</style>
